<md-sidenav layout="column" class="md-sidenav-left md-whiteframe-z1 menu" md-component-id="left" md-is-locked-open="$media('gt-md')">
    <md-toolbar>
        <h1 class="md-toolbar-tools">Menu</h1>
    </md-toolbar>
    <md-content layout="column">
        <div layout="column" class="menu-header">
            <div>
                <img ng-src-cache="{{account.data.picto.src | mediaScreen}}"></img>
            </div>
            <h3>{{account.data.login}}</h3>
            <h3>{{account.data.contact.email}}</h3>
        </div>
        <div layout="column" layout-align="start center" class="menu-actions">
            <md-button ng-href="#account" aria-label="Account">
                <md-icon md-svg-src="/assets/icons/grey/th-large.svg" class="md-small"></md-icon>
                <span>Boutique</span>
            </md-button>
            <md-button ng-href="#subscriptions" aria-label="Account">
                <md-icon md-svg-src="/assets/icons/grey/bookmark.svg" class="md-small"></md-icon>
                <span>Mes abonnements</span>
            </md-button>
            <md-button ng-click="account.disconnect()" aria-label="Account">
                <md-icon md-svg-src="/assets/icons/grey/times.svg" class="md-small"></md-icon>
                <span>Déconnecter</span>
            </md-button>
        </div>
    </md-content>
</md-sidenav>

<div layout="column" layout-fill tabindex="-1" role="main">

    <md-toolbar class="toolbar md-whiteframe-z1">

        <div class="md-toolbar-tools">

            <md-button aria-label="Toggle Menu" ng-click="openMenu()" hide-gt-md>
                <md-icon md-svg-src="/assets/icons/white/bars.svg" class="md-medium"></md-icon>
            </md-button>

            <div layout flex>
                
                <div class="md-toolbar-item">
                    <md-button ng-click="back()" aria-label="Back">
                        <md-icon md-svg-src="/assets/icons/white/arrow-left.svg" class="md-medium"></md-icon>
                    </md-button>
                    <span hide-sm>Message</span>
                </div>

                <span flex></span>
                
                <div class="md-toolbar-item">
                    <md-button ng-href="/pro#/" aria-label="Home">
                        <md-icon md-svg-src="/assets/icons/white/home.svg" class="md-medium"></md-icon>
                    </md-button>
                    <md-button ng-href="/pro#search" aria-label="Search">
                        <md-icon md-svg-src="/assets/icons/white/search.svg" class="md-medium"></md-icon>
                    </md-button>
                </div>
            </div>
        </div>
    </md-toolbar>

    <md-content class="content" md-scroll-y flex>
        <md-card>
            <md-card-content>

                <div ng-if="account.data.categories.length > 1" layout layout-padding>
                    <md-select ng-model="alert.data.shop.category">
                        <md-select-label>{{ alert.data.shop.category ? alert.data.shop.category.name : 'Séléctionnez une catégorie' }}</md-select-label>
                        <md-option ng-value="opt" ng-repeat="opt in account.data.categories">{{ opt.name }}</md-option>
                    </md-select>
                </div>

                <div layout layout-padding>
                    <md-select ng-model="alert.data.type">
                        <md-select-label>{{ alert.data.type ? alert.data.type.name : 'Séléctionnez un message' }}</md-select-label>
                        <md-option ng-value="opt" ng-repeat="opt in alert.data.shop.category">{{ opt.name }}</md-option>
                    </md-select>
                </div>

                <div>
                    <md-button button-crop src="alert.data.articles[0].image.src" out="alert.data.articles[0].image.src" ratio="800/400" width="800" progress="progress" aria-label="Upload" class="md-raised md-accent">
                        <md-icon md-svg-src="/assets/icons/white/plus.svg" class="md-medium"></md-icon>
                        <span>Image</span>
                    </md-button>

                    <div ng-if="alert.data.articles[0].image.src" relative>
                        <md-button ng-click="alert.removeImage(0)" aria-label="Remove"  class="md-small md-raised fab-top-right">
                            <md-icon md-svg-src="/assets/icons/grey/times.svg" class="md-medium"></md-icon>
                        </md-button>
                        <img ng-src="{{alert.data.articles[0].image.src | mediaScreen}}" alt="image">
                    </div>
                </div>

			    <div>
                    <md-progress-linear md-mode="determinate" value="{{progress}}"></md-progress-linear>
                </div>

                <md-input-container flex>
                    <label>Description</label>
                    <textarea ng-model="alert.data.articles[0].content" required md-maxlength="300"></textarea>
                    <md-button ng-click="openBottomSheet($event, 0)" aria-label="Actions" class="md-small md-accent fab-bottom-right">
                        <md-icon md-svg-src="/assets/icons/pink/caret-up.svg" class="md-medium"></md-icon>
                        <span>Actions</span>
                    </md-button>
                </md-input-container>

            </md-card-content>
        </md-card>

        <md-card ng-repeat="article in alert.data.articles | slice:1">
            <md-card-content>

                <div relative>
                    <img ng-src="{{article.image.src}}" alt="image">
                    
                    <md-button ng-click="alert.removeArticle($index+1)" aria-label="Remove"  class="md-small md-raised fab-top-right">
                        <md-icon md-svg-src="/assets/icons/grey/times.svg" class="md-medium"></md-icon>
                    </md-button>
                </div>

                <md-input-container flex relative>
                    <label>Description</label>
                    <textarea ng-model="article.content" required md-maxlength="300"></textarea>
                    <md-button ng-click="openBottomSheet($event, $index+1)" aria-label="Actions" class="md-small md-accent fab-bottom-right">
                        <md-icon md-svg-src="/assets/icons/pink/caret-up.svg" class="md-medium"></md-icon>
                        <span>Actions</span>
                    </md-button>
                </md-input-container>
            </md-card-content>
        </md-card>

        <md-card>
            <md-card-content>

                <md-button button-crop select="alert.addImage($image)" ratio="800/400" width="800" progress="progress2" aria-label="Upload" class="md-raised md-accent">
                    <md-icon md-svg-src="/assets/icons/white/plus.svg" class="md-medium"></md-icon>
                    <span>Article</span>
                </md-button>

                <md-progress-linear md-mode="determinate" value="{{progress2}}"></md-progress-linear>

                <!--<md-radio-group ng-model="alert.data.dates.delay" flex>
                    <md-radio-button ng-repeat="d in alert.maturities"
                                     ng-value="d.value"
                                     aria-label="{{ d.name }}">
                        {{ d.name }}
                    </md-radio-button>
                </md-radio-group>-->

                <md-select ng-model="alert.data.dates.delay">
                    <md-select-label>{{ alert.data.dates.delay ? alert.data.dates.delay : 'Séléctionnez une durée' }}</md-select-label>
                    <md-option ng-value="opt.value" ng-repeat="opt in alert.maturities">{{ opt.name }}</md-option>
                </md-select>

                <div layout layout-padding>
                    <span flex></span>
                    <md-button ng-click="alert.save()" aria-label="Save" class="md-raised md-accent">
                        <md-icon md-svg-src="/assets/icons/white/paper-plane-o.svg" class="md-small"></md-icon>
                        <span>Envoyer</span>
                    </md-button>
                </div>

            </md-card-content>
        </md-card>

    </md-content>
</div>
